<template>
  <div>
    <!-- 使用 v-if 来控制 el-dialog 的显示和销毁 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="80%"
      top="10vh"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="min-height: 500px"
      >
        <el-tab-pane
          label="面板"
          name="panel"
          v-if="detectorInfo.detectorType == '107'"
        >
          <Panel ref="rePanel" :deviceInfo="detectorInfo" />
        </el-tab-pane>

        <el-tab-pane label="基本信息" name="base">
          <Base ref="refCommand" :deviceInfo="detectorInfo" />
        </el-tab-pane>

        <el-tab-pane label="告警信息" name="alarm">
          <Alarm ref="refAlarm" :deviceInfo="detectorInfo" :isDetector="true" />
        </el-tab-pane>

        <el-tab-pane label="业主" name="person">
          <OwnerList ref="refPerson" :deviceInfo="detectorInfo" />
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="instruct" style="height: 100%">
          <InstructRecord ref="refInstruct" :deviceInfo="detectorInfo" />
        </el-tab-pane>
        <el-tab-pane label="查看摄像机" name="relevancy" style="height: 100%">
          <relevancy
            ref="refrelevancy"
            :deviceInfo="detectorInfo"
            :roomId="roomId"
          />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqPlayList } from "@api/api.js";
import Alarm from "../Alarm.vue";
import OwnerList from "@/components/DeviceInfo/components/ownerList.vue";
import Base from "./Base.vue";
import InstructRecord from "../InstructRecord.vue";
import relevancy from "../relevancy.vue";
import Panel from "../panel/Panel.vue";

export default {
  props: {
    detectorInfo: {
      type: Object,
      default: () => {},
    },
    roomId: {
      type: String,
      default: () => "",
    },
  },
  components: { Base, Alarm, OwnerList, InstructRecord, Panel, relevancy },
  mixins: [],
  data() {
    return {
      activeName: "base",
      dialogVisible: false,
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    dialogVisible(e) {
      if (e) {
        this.$nextTick(() => {
          this.$refs.refCommand.getKeyCommandList();
        });
        // console.log("this.deviceInfo.detectorType", this.detectorInfo);
        if (this.detectorInfo.detectorType == "107") {
          this.activeName = "panel";
          this.$nextTick(() => {
            this.$refs.rePanel.getDetectorDxtend();
            this.$refs.rePanel.getKeyCommandList();
          });
        }
      }
    },
  },
  methods: {
    handleClick(tab, event) {
      if (tab.paneName === "alarm") {
        this.$refs.refAlarm.AlarmList();
      } else if (tab.paneName === "person") {
        this.$refs.refPerson.getDeviceUsergetByImei();
      } else if (tab.paneName === "instruct") {
        this.$refs.refInstruct.getInitDataList();
      } else if (tab.paneName === "panel") {
        this.$refs.rePanel.getDetectorDxtend();
        this.$refs.rePanel.getKeyCommandList();
      } else if (tab.paneName === "relevancy") {
        this.$refs.refrelevancy.getDetectorDetail();
        this.$refs.refrelevancy.getList();
      }
    },
    // 点击关闭弹框
    closeDialog() {
      this.activeName = "base";
      this.dialogVisible = false;
    },
  },
  deactivated() {
    // this.closeDialog();
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

// ::v-deep .el-dialog {
//   min-height: 100vh;
//   min-width: 100vw;
// }

::v-deep .el-dialog__header {
  text-align: center;
}

// 导航栏颜色
::v-deep .el-tabs__item {
  color: @primaryThemeTxtColor2;
}

::v-deep .el-tabs__active-bar {
  background-color: #7367f0;
}

::v-deep .el-tabs__item.is-active {
  color: #7367f0;
}

::v-deep .el-dialog__body {
  padding: 0px 20px;
}

// 导航栏线条颜色
::v-deep .el-tabs__nav-wrap::after {
  background: @primaryBgcolor5;
}

::v-deep .el-tabs__nav {
  padding: 5px 20px;
}

::v-deep .el-tabs__active-bar {
  padding: 0px 20px;
  // width: 100% !important;
}
// ::v-deep .el-tabs__content{
//   min-height: 560px;
// }

::v-deep .div_box1 {
  flex: 1 !important;
}
</style>
